<template>
  <div class="tablewrap tablewrapLog">
    <div class="tag-table-box">
      <div class="tag-table-header">
        <div v-for="(item, i) in dataConfig" :key="i + 'config'">
          <template>
            <div
              class="tag-table-header-cell"
              :style="{
                width: item.width
                  ? item.width + 'px'
                  : getDefaultWidth(dataConfig),
              }"
            >
              <slot :name="item.prop + 'Header'"></slot>
              <span v-if="!item.selectOption">{{ item.label }}</span>
            </div>
          </template>
        </div>
      </div>

      <div
        class="tag-table-body"
        v-if="dataSource.length > 0"
        v-loading="isLoading"
      >
        <div
          class="row"
          v-for="(row, index) in dataSource"
          :key="index + 'row'"
        >
          <div class="row-top">
            <slot name="rowHead" :row="row"></slot>
          </div>

          <div class="tag-table-body-row">
            <div
              v-for="(item, i) in dataConfig"
              :key="i + 'config'"
              :class="[i !== dataConfig.length - 1 ? '' : 'flex1']"
            >
              <template>
                <div
                  :style="{
                    width: item.width
                      ? item.width + 'px'
                      : getDefaultWidth(dataConfig),
                    height:
                      row.boxInfo && row.boxInfo.length > 0
                        ? 100 * row.boxInfo.length + 'px'
                        : '80px',
                  }"
                  :class="[
                    'tag-table-body-cell',
                    i !== dataConfig.length - 1 ? 'border-right' : 'flex1',
                  ]"
                >
                  <slot :name="item.prop" :row="row"></slot>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="tag-table-body" v-else v-loading="isLoading">
        <div class="no-data">暂无数据</div>
      </div>
    </div>

    <el-pagination
      v-if="total > 0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    isLoading: {
      type: Boolean,
      default: false,
    },

    dataSource: {
      type: Array,
      required: true,
    },
    dataConfig: {
      type: Array,
      required: true,
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageNum: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      pageSizeTable: 10,
      pageNumTable: 1,
      allWidth: window.innerWidth * 0.8 - 40,
    };
  },
  mounted() {
    window.onresize = () => {
      let width = window.innerWidth * 0.8 - 40;
      this.allWidth = width < 1420 ? 1420 : width;
      this.getDefaultWidth(this.dataConfig);
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSizeTable = val;
      let querystr = {
        pageNum: this.pageNumTable,
        pageSize: this.pageSizeTable,
      };
      // 将参数结果传值
      this.$emit("pageChange", querystr);
    },
    handleCurrentChange(val) {
      this.pageNumTable = val;
      let querystr = {
        pageNum: this.pageNumTable,
        pageSize: this.pageSizeTable,
      };
      // 将参数结果传值
      this.$emit("pageChange", querystr);
    },
    // 计算 当前行 未定义宽度的 列宽
    getDefaultWidth(dataConfig) {
      // let box = document.querySelector(".tablewrapLog");
      let nowWidth = 0;

      // 获得已设置宽度
      dataConfig.map((e) => {
        if (e.width) nowWidth = nowWidth + Number(e.width);
      });
      let avageNum = dataConfig.filter((m) => !m.width).length;
      let defaultWidth = (this.allWidth - nowWidth) / avageNum;
      return defaultWidth + "px";
    },
  },
};
</script>
<style lang="scss" scoped>
.tablewrap {
  width: 100%;
  margin-top: 10px;
  min-width: 1420px;
}
// .el-tooltip__popper {
//   background: #000 !important; /*背景色  !important优先级*/
//   opacity: 0.5 !important; /*背景色透明度*/
//   color: #ffffff !important; /*字体颜色*/
//   max-width:150px !important;
//   flex-wrap: wrap;
//   /* width: auto; */
//   // width: auto;
// }
.el-pagination {
  margin-top: 20px;
}

.tag-table-box {
  font-size: 14px;
  color: #333333;
}

.tag-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f4f6;
  padding: 10px 0;
  box-sizing: border-box;
  height: 48px;
  line-height: 33px;
  .tag-table-header-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding-left: 10px;
  }
}

.tag-table-body {
  .no-data {
    text-align: center;
    // height: 90px;
    line-height: 300px;
  }
  .row {
    border: 1px solid #ebeef5;
    margin-top: 20px;
    width: 100%;
    .row-top {
      background-color: #fafafa;
      display: flex;
      min-height: 40px;
      line-height: 40px;
      padding-left: 10px;
      box-sizing: border-box;
      .mar-right {
        margin-right: 30px;
      }
    }
    .tag-table-body-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tag-table-body-cell {
        min-width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        word-break: break-word;
        overflow-wrap: break-word;
      }
      .border-right {
        border-right: 1px solid #ebeef5;
      }
      .flex1 {
        // flex: auto;
        // border-left: 1px solid #cfcfcf;
        //   flex: 1;
        //   // word-break: break-word;
        //   // overflow-wrap: break-word;
      }
    }
  }
}
</style>
